<template>
  <div>
    <el-popover v-model="sss" placement="bottom" trigger="click" popper-class="link_menu">
      <div class="menu_box">
        <div class="menu_item" v-for="(item, index) in prevList" @click="emitData(item)" :key="index">
          {{ item.title }}
        </div>
      </div>
      <!-- <ul class="list" v-if="prevList">
        <li v-for="(item, index) in prevList" @click="emitData(item)" :key="index">
          {{ item.title }}
        </li>
      </ul> -->
      <el-button :loading="$store.state.isLoading" type="primary" size="small" slot="reference">选择栏目</el-button>
      <keep-alive>
        <component :is="current" :click_title="click_title" :show="show" showType="list" :isShopCate="isShopCate" @sendShop="getSend" @isshow="getShow"></component>
      </keep-alive>
    </el-popover>
  </div>
</template>
<script>
import xzShop from "@/components/currency/xz_shop.vue";
import xzShopCate from "@/components/currency/xz_shopCate.vue";
import xzShopCate2 from "@/components/currency/xz_shopCate.vue";
import xzMasterCate from "@/components/currency/xz_mastercate.vue";
import xzTourCate from "@/components/currency/xz_tourCate.vue";

import xzNews from "@/components/currency/xz_news.vue";
import xzForm from "@/components/currency/xz_form.vue";
import xznewscate from "@/components/currency/xz_newscate.vue";

import xzchajian from "@/components/currency/xz_chajian.vue";
import xzestatecate from "@/components/currency/xz_estatecate.vue";

import xzlessoncate from "@/components/currency/xz_lessoncate.vue";
import xzLesson1 from "@/components/currency/xz_lesson1.vue";
import xzusershop from "@/components/currency/xz_usershop";
import xzmodule from "@/components/currency/xz_module";

import xzsuppliercate from "@/components/currency/xz_suppliercate";
import xzcityinfocate from "@/components/currency/xz_cityinfocate";
import xztaskcate from "@/components/currency/xz_taskcate";
import xzsearch from "@/components/currency/xz_search";

export default {
  props: {
    index: null,
  },
  components: {
    xzShop,
    xzShopCate,
    xzNews,
    xznewscate,
    xzchajian,
    xzTourCate,
    xzShopCate2,
    xzMasterCate,
    xzestatecate,
    xzForm,
    xzlessoncate,
    xzLesson1,
    xzusershop,
    xzmodule,
    xzsuppliercate,
    xzcityinfocate,
    xztaskcate,
    xzsearch,
  },
  data() {
    return {
      click_title: "",
      list: [],
      shopList: [],
      dialogTableVisible: false,
      show: true,
      showCate: false,
      current: "",
      prevList: [],
      sss: false,
      isShopCate: true,
    };
  },
  methods: {
    getShopMenuList() {
      var params = {};
      this.$api.getConfig.getList(params).then((res) => {
        this.prevList = res.data.result;
      });
    },
    emitData(data) {
      var row = {};
      row.index = this.index;
      row.disable = true;

      this.click_title = data.title;

      if (data.title == "指定产品") {
        if (this.$store.state.shopSlist == "" || this.$store.state.shopSlist.page != 1) {
          this.$store.dispatch("getShopsAll", {
            page: 1,
            page_size: 10,
            is_supplier: 2,
          });
        }
        this.current = "xzShop";
        this.show = true;
      } else if (data.title == "指定商品分类") {
        // if (this.$store.state.shopCateList == "") {
        this.$store.dispatch("getShopsCate");
        // }
        this.isShopCate = true;
        this.current = "xzShopCate";
        this.show = true;
      } else if (data.title == "商品分类2") {
        if (this.$store.state.shopCateList == "") {
          this.$store.dispatch("getShopsCate");
        }
        this.current = "xzShopCate2";
        this.show = true;
      } else if (data.title == "指定旅游分类") {
        if (this.$store.state.tourCateList == "") {
          this.$store.dispatch("getTourCate");
        }
        this.current = "xzTourCate";
        this.show = true;
      } else if (data.title == "插件") {
        this.current = "xzchajian";
        this.show = true;
      } else if (data.title == "指定文章") {
        if (this.$store.state.newsList == "" || this.$store.state.newsList.page != 1) {
          this.$store.dispatch("getNewsList", { page: 1, page_size: 10 });
        }
        this.current = "xzNews";
        this.show = true;
      } else if (data.title == "文章分类") {
        this.show = true;
        this.current = "xznewscate";
      } else if (data.title == "自定义链接") {
        row.disable = false;
        row.title = "自定义链接";
        row.url_title = "";

        this.$emit("sendRow", row);
      } else if (data.title == "供应商分类") {
        this.current = "xzsuppliercate";
        this.show = true;
      } else if (data.title == "供应商分类") {
        if (this.$store.state.shopCateList == "") {
          this.$store.dispatch("getShopsCate");
        }
        this.isShopCate = false;
        this.current = "xzShopCate";
        this.show = true;
      } else if (data.title == "房产分类") {
        this.current = "xzestatecate";
        this.show = true;
      } else if (data.title == "表单") {
        this.current = "xzForm";
        this.show = true;
      } else if (data.title == "课程分类") {
        console.log(111);
        this.current = "xzlessoncate";
        this.show = true;
      } else if (data.title == "指定课程") {
        this.current = "xzLesson1";
        this.show = true;
      } else if (data.title == "供应商店铺") {
        this.current = "xzusershop";
        this.show = true;
      } else if (data.title == "主题") {
        this.current = "xzmodule";
        this.show = true;
      } else if (data.title == "分类信息") {
        this.current = "xzcityinfocate";
        this.show = true;
      } else if (data.title == "任务分类") {
        this.current = "xztaskcate";
        this.show = true;
      } else if (data.title == "搜索") {
        this.current = "xzsearch";
        this.show = true;
      } else if (data.title == "师傅分类") {
        this.current = "xzMasterCate";
        this.show = true;
      } else {
        row.url = data.url;
        row.url_title = data.title;
        this.$emit("sendRow", row);
      }
    },
    getShow(val) {
      this.show = val;
    },
    getSend(row) {
      row.index = this.index;
      row.disable = true;

      if (row.url_title == "模板") {
        row.url = "/pages/sub/theme/theme?iden=" + row.iden;
        row.url_title = "模板:" + row.title;
        this.$emit("sendRow", row);
      }
      if (this.click_title == "供应商分类") {
        row.click_title = "供应商分类";
      }
      if (this.current == "xzShopCate2") {
        row.url_title = "商品分类2";
      }
      if (row.url_title == "表单") {
        row.url = "/pages/sub/form/form?id=" + row.id;
      }
      if (row.url_title == "指定课程") {
        row.url = "/pages/lesson/lessoninfo/lessoninfo?id=" + row.id;
      }
      if (row.url_title == "产品分类" || this.click_title == "商品分类2" || this.click_title == "指定商品分类") {
        row.url = row.taburl;
        row.url_title = row.url_title + row.activeName;
      }
      if (this.click_title == "供应商店铺") {
        row.url = "/pages/shop/supplier/supplier?id=" + row.id;
        row.url_title = row.shop_title;
      }
      if (this.click_title == "供应商分类") {
        row.url = "/supplier/shops-search?cate=" + row.id;
        row.url_title = row.title;
      }
      // }
      if (row.url_title == "分类信息") {
        row.url = "/cityinfo/catelist?cate=" + row.id;
        row.url_title = row.title;
      }
      if (row.url_title == "任务列表") {
        row.url = "/task/list";
        row.url_title = "任务列表";
      }
      if (row.url_title == "任务分类") {
        row.url = "/task/list?cate_id=" + row.id;
        row.url_title = row.title;
      }

      if (row.url_title == "师傅分类") {
        row.url = row.taburl;
        row.url_title = row.title;
      }
      this.$emit("sendRow", row);
    },
  },
  watch: {
    sss(val) {
      if (val) {
        this.getShopMenuList();
      }
    },
  },
  mounted() {},
  computed: {},
};
</script>
<style lang="less" scoped>
.link_menu {
  // width: 20px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > li {
    width: 33%;
    height: 30px;
    margin-bottom: 10px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    background-color: #f7f7f7;
  }
  li:hover {
    background: #1c89d5;
    color: #fff;
  }
}
.menu_box {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .menu_item {
    width: 150px;
    margin-bottom: 8px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #f7f7f7;
    text-align: center;
  }
  .menu_item:hover {
    background: #1c89d5;
    color: #fff;
  }
}
.menu_box::after {
  width: 110px;
  content: "";
}
</style>
